<?php
    // require_once "post_wx.php";
?>

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0,  minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
	<title>戳这，邂逅刺身拼盘！</title>
	<link rel="stylesheet" href="style/normalize.css">
	<link rel="stylesheet" href="style/style.css">
	<script src="js/jquery-3.1.1.min.js"></script>
	<script src="js/jquery.imgpreload.min.js"></script>
	<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
</head>
<body>
<div class="thwartwise">
	<p>为保证浏览体验，请竖屏浏览页面。</p>
</div>
<div class="main">
	<!-- 旋转loading -->
	<div class="loader-inner ball-pulse-sync">
		<div id="load1"></div>
		<div id="load2"></div>
		<div id="load3"></div>
	</div>
	<!-- 百分比loading -->
	<div class="loading">
		<div class="loading-box">
			<p id="loadingNum">0%</p>
			<div><span id="loadingT"></span></div>
		</div>
	</div>
	<!-- 主体文档 -->
	<div class="main-box">
		<div class="index">
			<div class="title"><img src="images/t-2.png" alt="吃货的满足力"></div>
			<div class="banner"><img src="images/fir.png" alt="点击start开始"></div>
			<div class="bot">
				<span class="bot-active start-bot"><img src="images/b-1.png" alt="开始"></span>
				<span class="bot-active guize-bot"><img src="images/b-6.png" alt="活动详情"></span>
			</div>
			<div class="guize">
				<!-- 规则的盒子 -->
				<div class="guize-box">
					<h3>活动规则</h3>
					<p>*本次活动由2017年6月22日开始，优惠券派发完毕后即视为活动结束.</p>
					<p>*在优惠券数量有余量的情况下，用户进入参与游戏有机会获得元気特惠产品电子优惠券一张，优惠券数量有限，派完即止.</p>
					<p>*用户在每期游戏中只能获得一张元気特惠产品电子优惠券.</p>
					<p>*元気特惠产品电子优惠券可以到元気寿司全国门店核销使用，核销有效期截止到2017年7月31日。详情可查看优惠券页面具体条款和细则.</p>
					<p>*凡参与活动者，承诺已阅读和同意本活动以及电子优惠券的相关条款和细则.</p>
				</div>
			</div>
		</div>
		<div class="game">
			<div class="max">
				<figure id="figpic"><img src="images/max.png" alt="max"></figure>
				<div class="mab"></div>
				<div class="star">
					<span></span>
					<span></span>
					<span></span>
					<span></span>
				</div>
			</div>
			<div class="big">
				<div class="xiong-box">
					<img class="xiong" src="images/xiong.png" alt="熊">
					<div class="lian"></div>
				</div>
				<div class="panzi">
					<div class="left">
						<span class="l-1"></span>
						<span class="l-2"></span>
						<span class="l-3"></span>
						<span class="l-4"></span>
						<span class="l-5"></span>
						<span class="l-6"></span>
						<span class="l-7"></span>
						<span class="l-8"></span>
						<span class="l-9"></span>
					</div>
					<div class="right">
						<span class="r-1"></span>
						<span class="r-2"></span>
						<span class="r-3"></span>
						<span class="r-4"></span>
						<span class="r-5"></span>
						<span class="r-6"></span>
						<span class="r-7"></span>
						<span class="r-8"></span>
						<span class="r-9"></span>
					</div>
				</div>
				<div class="shousi">
					<img class="dizuo" src="images/hui.png" alt="寿司底座">
					<div class="ss"></div>
				</div>
			</div>
			<div class="bot">
				<div class="botton">
					<input class="bot-active-xx" id="fc" type="button">
					<img class="fc-ts" src="images/t-4.png" alt="按钮提示">
				</div>
			</div>
		</div>
		<div class="coupon-box">
			<div class="true">
				<div class="title">
					<img src="images/t-1.png" alt="恭喜你获得一张优惠券">
				</div>
				<div class="coupon" data-prize="">
					<a href="exchange.php">
						<span id="coupon-bot">
							<img src="images/b-3.png" alt="查看优惠券">
						</span>
					</a>
				</div>
				<div class="bot">
					<span class="share-bot bot-active"><img src="images/b-4.png" alt="分享好友"></span>
					<span class="gz-bot bot-active"><img src="images/b-5.png" alt="关注官微"></span>
				</div>
			</div>
			<div class="false">
				<div class="coupon">
					<img src="images/no.png" alt="优惠券已经发放完了">
				</div>
				<div class="bot">
					<span class="share-bot bot-active"><img src="images/b-4.png" alt="分享好友"></span>
					<span class="gz-bot bot-active"><img src="images/b-5.png" alt="关注官微"></span>
				</div>
			</div>
			<div class="share">
				<img class="one" src="images/s.png" alt="分享">
				<span class="back bot-active"><img src="images/b-2.png" alt="返回"></span>
			</div>
			<div class="ewm">
				<img class="one" src="images/e-1.png" alt="二维码">
				<span class="back bot-active"><img src="images/b-2.png" alt="返回"></span>
			</div>
		</div>
	</div>
</div>
<script src="js/global.js"></script>
<!--<script>
    var shareUrl = window.location.href;
    var shareTitle = '戳这，邂逅刺身拼盘！';//分享描述
    var shareDesc = '别看了！我说真的——元気大满足月，过万份寿司券等你抢！';//分享描述
    var shareImg = 'http://test.brandsh.cn/lambor/yuanqi/images/share.jpg';//分享图片
    wx.config({
        debug: false,
        appId: '<?php echo $signPackage["appId"];?>',
        timestamp: '<?php echo $signPackage["timestamp"];?>',
        nonceStr: '<?php echo $signPackage["nonceStr"];?>',
        signature: '<?php echo $signPackage["signature"];?>',
        jsApiList: [
            'checkJsApi',
            'onMenuShareTimeline',
            'onMenuShareAppMessage',
            'onMenuShareQQ',
        ]
    });
    wx.ready(function () {
        wx.checkJsApi({
            jsApiList: [
            	'onMenuShareTimeline',
                'onMenuShareAppMessage',
            	'onMenuShareQQ'
            ]
        });
           // 分享到朋友圈
        wx.onMenuShareTimeline({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareUrl, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {

            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
        });
          //分享给朋友
        wx.onMenuShareAppMessage({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareUrl, // 分享链接
            imgUrl: shareImg, // 分享图标
            type: '', // 分享类型,music、video或link，不填默认为link
            dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
            success: function () {

            },
            cancel: function () {
              // 用户取消分享后执行的回调函数
            }
        });
          //分享到QQ
        wx.onMenuShareQQ({
            title: shareTitle, // 分享标题
            desc: shareDesc, // 分享描述
            link: shareUrl, // 分享链接
            imgUrl: shareImg, // 分享图标
            success: function () {
              // 用户分享完成后执行的回调函数
            },
            cancel: function () {
               // 用户取消分享后执行的回调函数
            }
        });
      });
</script> -->

<script>
$(function(){
	// 是不是已经抽过奖的人，是的话pirze = true，并设置pirzeNum是哪一个奖品1~4，
	// 新用户设置pirze = false，忽略pirzeNum;
	var pirze = false,
		pirzeNum = 1;

	// 点击start
	(function(){
		$('.start-bot').on('click',function(){
			$('.index').fadeOut(200,function(){
				start();
			})
		})
	})();

	function start(){
		// 如果有券没有领取
		if(pirze){
			// 判断奖品
			showPirze(pirzeNum);
			// 奖品页面出现
			couponShow();
		}else{
			$('.game').fadeIn(10,function(){
				$('.max').addClass('game-show');
				$('.big').addClass('game-show');
				$('.bot').delay(500).fadeIn();
			});
		}
	}


	// 长按满足力启动
	(function(){
		var yz;
		var chang = false;
		// 序列帧的初始值
		var a = 1;
		// 阈值
		var yuz = true;
		// 码表的滚动间隔时间
		var time = 1000 / 30;
		// 取到码表的元素
		var mab = document.querySelector('.mab');
		var changan;

		// 根据数字更改图片
		function changePic(num){
			var num = 89 * num;
			mab.style.backgroundPosition = '0% '+(-num)+'px';
		}

		// 码表的左右控制
		function lin(){
			if(a == 1){
				yuz = true;
			}else if(a == 45){
				yuz = false;
			}

			if(yuz){
				a++
			}else{
				a--;
			}
			changePic(a);
		}

		// 长按的判断阈值
		var ds200 = false;
		// 手机按上事件
		function start(e){
			e.preventDefault();

			// 长按时间小于200ms则不起效果
			changan = window.setTimeout(function(){
				ds200 = true;
				$('#fc').addClass('bot-ac9');
				// 盘子进入的动画
				$('.panzi .left span').removeClass('l-1 l-2 l-3 l-4 l-5 l-6 l-7 l-8 l-9');
				setTimeout(function(){
					$('.panzi .right span').removeClass('r-1 r-2 r-3 r-4 r-5 r-6 r-7 r-8 r-9');
				},2000);
				
				// 运行动画
				$('.lian').addClass('lianAni');
				$('.ss').addClass('shousiAni');
				$('.xiong-box').addClass('xiong-box-sx');

				// 开启长按后删除提示框
				$('.sx').fadeOut(function(){
					$(this).remove();
				});
				$('.sx5').fadeOut(function(){
					$(this).remove();
				});

				// 运行计算数字的函数
				function goBg(){
					lin();
				}
				// 运行码表函数
				yz = window.setInterval(goBg,time);
			},500);
		}

		// 手指离开屏幕的事件
		function rStart(){
			// 清除长按时间小于200ms的事件
			window.clearTimeout(changan);

			if(ds200){

				// 箭头没有到红框内部的函数
				function redNo(bool){
					// 取红框内随机数
					var sj = randomNum(15);
					$('#fc').removeClass('bot-ac9');

					// 当前位置减去随机数取绝对值得到一个红框内部的位置
					q = Math.abs(sj - a);

					// 再运行一个定时器让箭头跑到红框内部
					qyz = window.setInterval(function(){
						yuz = bool;
						lin();
						q--;
						if(q <= 0){
							clearInterval(qyz);
							lastFun();
							// 在中间显示星星
							if(a > 20 && a < 25){
								$('.star span:eq(0)').addClass('one');
								$('.star span:eq(1)').addClass('two');
								$('.star span:eq(2)').addClass('three');
								$('.star span:eq(3)').addClass('four');
							}
						}
					},time);
				}

				if(a >= 1 && a < 14){
					// 不在红框内部，小于红框，运行加
					redNo(true);
				}else if(a > 31 && a <= 45){
					// 不在红框内部，大于红框，运行减
					redNo(false);
				}else if(a >= 14 && a <= 30){
					if(a > 20 && a < 25){
						$('.star span:eq(0)').addClass('one');
						$('.star span:eq(1)').addClass('two');
						$('.star span:eq(2)').addClass('three');
						$('.star span:eq(3)').addClass('four');
					}
					lastFun();
				}


				$('.xiong-box').removeClass('xiong-box-sx');
				$('.lian').removeClass('lianAni');
				window.clearInterval(yz);
			}
		}

		(function(){
		    var fc = document.getElementById('fc');
		    fc.addEventListener('touchstart', start, false);
		    fc.addEventListener('touchend', rStart, false);
		})();
	})();

	var doneBool = true;
	// 中奖的名次，现在先写上，接口完成后要在ajax的成功回调中设置名次；
	var doneNum = 1;
	function lastFun(){
		if(doneBool){
			doneBool = false;

			$.ajax({
				url: '/path/to/file',
				type: 'default GET (Other values: POST)',
				dataType: 'default: Intelligent Guess (Other values: xml, json, script, or html)',
			})
			.done(function(data) {
				// 成功加载
				// ajax请求回来后，如果中奖就传参数true，第二个参数是券的分类1~4；没中奖传参数false，第二个参数忽略
				next(true,doneNum);
			})
			.fail(function() {
				console.log("加载失败，请刷新后重试！");
			});


			next(true,doneNum);
			function next(bool,num){
				if(bool){
					// 显示奖品
					// global.js - 132行更改奖品图片和外链
					showPirze(num);

					$('.game').fadeOut(500,function(){
						$(this).remove();
						couponShow();
					});
				}else{
					$('.game').fadeOut(500,function(){
						$(this).remove();
						$('.false').fadeIn();
						$('.coupon-box').fadeIn(10,function(){
							$('.coupon').addClass('coupon-show');
							$('.bot').addClass('coupon-show');
						})
					});
				}
			}
		}
	}


	// 点击查看优惠券
	(function(){
		$('#coupon-bot').on('click',function(){
			console.log(doneNum);
		});
	})();
});
</script>
</body>
</html>
